<template>
  <div>
    <el-card>
      <div slot="header"
        :class="$style.header">
        <div :class="$style.search">
          <span>昵称：</span>
          <el-input v-model="name"
            clearable
            @clear="filterChange"></el-input>
        </div>
        <div :class="$style.search">
          <span>等级：</span>
          <el-input v-model="grade"
            clearable
            @clear="filterChange"></el-input>
        </div>
        
        <el-button type="primary"
          @click="filterChange">
          搜索<i class="el-icon-search"></i>
        </el-button>
          <el-button type="primary"
          >新增</el-button>
      </div>

      <el-table :data="tableData"
        m-b-10>
        <el-table-column label="ID">
          <template slot-scope="{ row }">
            {{row.id}}
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="{ row }">
            <img :src="row.img">
          </template>
        </el-table-column>
        <el-table-column label="名称"
          align="center">
          <template slot-scope="{ row }">
            {{row.name}}
          </template>
        </el-table-column>
        <el-table-column label="推荐状态"
          align="center">
          <template slot-scope="{ row }">
            {{state(row.state)}}
          </template>
        </el-table-column>
        <el-table-column label="操作"
          align="center">
          <template slot-scope="{row}">
            <el-button type="primary"
              size="mini"
              @click="details(row.id)">删 除</el-button>
            <el-button type="warning"
              size="mini"
              @click="ship(row.id)">状态</el-button>
            <el-button type="danger"
              size="mini"
              @click="staff(row.id)">推荐</el-button>
          </template>
        </el-table-column>
      </el-table>

      <BasePagination :max="maxPage"
        :now.sync="nowPage"></BasePagination>
    </el-card>
  </div>
</template>

<script>
import BasePagination from '@/components/BasePagination'

export default {
  components: {
    BasePagination
  },

  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '商品1',
          img: './sad',
          state: 1,
        },
        {
          id: 2,
          name: '商品2',
          img: './sad',
          state: 2,
        },
        {
          id: 3,
          name: '商品3',
          img: './sad',
          state: 1,
        }
      ],
      search: '',
      select: '',
      date: [],
      maxPage: 1,
      nowPage: 1,
      name: '',
      grade: 1
    }
  },
  watch: {
    nowPage() {
      this.getData()
    }
  },
  methods: {
    change(val) {
      alert(`id：${val.id}  当前状态：${val.type}`)
    },
    init(to, from) {
      this.getData()
    },
    filterChange() {},
    getData() {},

    filterChange() {
      this.nowPage === 1 ? this.getData() : (this.nowPage = 1)
    },
    state(val) {
      if (val === 1) {
        return '已激活'
      } else if (val === 2) {
        return '未激活'
      }
    }
  }
}
</script>

<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    > span {
      margin-right: 5px;
    }
  }

  .search {
    display: flex;
    align-items: center;

    > div {
      width: 200px;
    }
  }

  [space] {
    flex-grow: 1;
  }
}
</style>
